import { defineComponent, ref } from "vue";
import "./MissionList.css";

export default defineComponent({
  name: "MissionList",
  setup() {
    const missions = ref([
      {
        id: "M001",
        name: "侦察任务Alpha",
        status: "进行中",
        priority: "高",
        progress: 75,
        team: "第1小队",
        time: "2024-01-15 08:00",
      },
      {
        id: "M002",
        name: "护航任务Bravo",
        status: "进行中",
        priority: "中",
        progress: 45,
        team: "第2小队",
        time: "2024-01-15 09:30",
      },
      {
        id: "M003",
        name: "补给任务Charlie",
        status: "待命",
        priority: "中",
        progress: 0,
        team: "第3小队",
        time: "2024-01-15 14:00",
      },
      {
        id: "M004",
        name: "巡逻任务Delta",
        status: "已完成",
        priority: "低",
        progress: 100,
        team: "第4小队",
        time: "2024-01-15 06:00",
      },
      {
        id: "M005",
        name: "支援任务Echo",
        status: "进行中",
        priority: "高",
        progress: 88,
        team: "第5小队",
        time: "2024-01-15 10:15",
      },
    ]);

    const getStatusClass = (status: string) => {
      switch (status) {
        case "进行中":
          return "mission-list__status--active";
        case "待命":
          return "mission-list__status--pending";
        case "已完成":
          return "mission-list__status--completed";
        default:
          return "";
      }
    };

    const getPriorityClass = (priority: string) => {
      switch (priority) {
        case "高":
          return "mission-list__priority--high";
        case "中":
          return "mission-list__priority--medium";
        case "低":
          return "mission-list__priority--low";
        default:
          return "";
      }
    };

    return () => (
      <div class="mission-list">
        <div class="mission-list__header">
          <h3 class="mission-list__title">作战任务列表</h3>
        </div>
        <div class="mission-list__content">
          {missions.value.map((mission) => (
            <div key={mission.id} class="mission-list__item">
              <div class="mission-list__item-header">
                <div class="mission-list__item-id">{mission.id}</div>
                <div class={`mission-list__priority ${getPriorityClass(mission.priority)}`}>
                  {mission.priority}优先级
                </div>
              </div>
              <div class="mission-list__item-name">{mission.name}</div>
              <div class="mission-list__item-info">
                <span class="mission-list__team">{mission.team}</span>
                <span class={`mission-list__status ${getStatusClass(mission.status)}`}>
                  {mission.status}
                </span>
              </div>
              <div class="mission-list__progress">
                <div class="mission-list__progress-bar">
                  <div
                    class="mission-list__progress-fill"
                    style={`width: ${mission.progress}%`}
                  ></div>
                </div>
                <span class="mission-list__progress-text">{mission.progress}%</span>
              </div>
              <div class="mission-list__time">{mission.time}</div>
            </div>
          ))}
        </div>
      </div>
    );
  },
});
